<template>
  <div class="exam-creator">
    <!-- Step 1: Basic Information -->
    <div v-if="currentStep === 1" class="step-container">
      <h2>试卷基本信息</h2>
      
      <div class="form-group">
        <label>试卷分类名称：</label>
        <input type="text" v-model="exam.category" placeholder="请选择试卷/期末考试试卷" class="form-input">
      </div>
      
      <div class="form-group">
        <label>试卷名称：</label>
        <input type="text" v-model="exam.name" placeholder="请输入试卷名称" class="form-input">
      </div>
      
      <div class="form-group">
        <label>试卷类型：</label>
        <div class="radio-group">
          <label>
            <input type="radio" v-model="exam.type" value="fixed"> 固定试题
          </label>
          <label>
            <input type="radio" v-model="exam.type" value="random"> 随机试题
          </label>
        </div>
        <p class="note">注：固定试题是指所有考试的试题相同，随机试题是指学生的试题不同。</p>
      </div>
      
      <div class="form-group">
        <label>试卷难度：</label>
        <select v-model="exam.difficulty" class="form-select">
          <option value="qualified">简单</option>
          <option value="general">一般</option>
          <option value="difficult">困难</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>备注信息：</label>
        <textarea 
          v-model="exam.notes" 
          placeholder="请输入备注信息" 
          class="form-textarea"
          maxlength="300"
        ></textarea>
        <p class="char-count">已输入{{ exam.notes.length }}/300</p>
      </div>
      
      <div class="button-group">
        <button class="btn" @click="cancel">返回</button>
        <button class="btn btn-primary" @click="nextStep">下一步</button>
      </div>
    </div>
    
    <!-- Step 2: Add Questions -->
    <div v-if="currentStep === 2" class="step-container">
  <h2>试卷基本信息</h2>
  
  <div class="section-actions">
    <button class="btn">添加部分</button>
    <button class="btn">批量删除</button>
  </div>
  
  <div class="question-section">
    <div class="section-header">
      <input 
        type="text" 
        v-model="sections[0].description" 
        placeholder="请输入描述" 
        class="section-input"
      >
      <p class="section-info">本部分共{{ sections[0].questions.length }}个小题，每小题5分，共{{ sections[0].questions.length * 5 }}分；在每小题给出的选项中，仅有一项是符合题目要求的。</p>
    </div>
    
    <div class="question-list">
      <div v-for="(question, qIndex) in sections[0].questions.slice(0,5)" :key="question.id" class="question-item">
        <div class="question-content">
          <div class="question-text">{{ question.content }}</div>
          <div class="question-meta">
            <select v-model="question.difficulty" class="difficulty-select">
              <option value="easy">简单</option>
              <option value="medium">中等</option>
              <option value="hard">困难</option>
            </select>
            <span class="points">{{ question.points }}分</span>
          </div>
        </div>
        <div class="question-actions">
          <button class="btn btn-small" @click="removeQuestion(qIndex)">删除试题</button>
          <button class="btn btn-small" @click="setPoints(qIndex)">设置分数</button>
        </div>
      </div>
    </div>
    
    <div class="section-actions">
      <button class="btn" @click="fetchQuestions">从题库获取试题</button>
      <button class="btn" @click="toggleCollapse">
        {{ isCollapsed ? '展开' : '收起' }}
      </button>
    </div>
  </div>
  
  <div class="button-group">
    <button class="btn">退出</button>
    <button class="btn" @click="prevStep">上一步</button>
    <button class="btn btn-primary" @click="nextStep">下一步</button>
  </div>
</div>
    
    <!-- Step 3: Exam Settings -->
    <div v-if="currentStep === 3" class="step-container">
      <h2>试卷基本信息</h2>
      
      <div class="settings-container">
        <div class="setting-item">
          <label>
            <input type="checkbox" v-model="examSettings.allowMultipleSelection">
            允许多选题需选择比例得分
          </label>
        </div>
        
        <div class="setting-item">
          <label>
            <input type="checkbox" v-model="examSettings.requireAllAnswers">
            需要回答完所有试题才能交卷
          </label>
        </div>
        
        <div class="setting-item">
          <label>
            <input type="checkbox" v-model="examSettings.showPassNotification">
            合格通知
          </label>
        </div>
      </div>
      
      <div class="button-group">
        <button class="btn" @click="cancel">退出</button>
        <button class="btn" @click="prevStep">上一步</button>
        <button class="btn btn-primary" @click="send">发布</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      isCollapsed: false,
      exam: {
        category: '',
        name: '',
        type: 'fixed',
        difficulty: 'qualified',
        notes: ''
      },
      sections: [
        {
          description: '',
          questions: []
        }
      ],
      questionBank: [
      // 这里应该是从后端API获取的题库数据
      { id: 1, content: '题目1内容', difficulty: 'medium', points: 5 },
      { id: 2, content: '题目2内容', difficulty: 'easy', points: 5 },
    ],
      examSettings: {
        allowMultipleSelection: false,
        requireAllAnswers: false,
        showPassNotification: false
      }
    };
  },
  methods: {
    nextStep() {
      if (this.currentStep < 3) {
        this.currentStep++;
      } else {
        // Submit the exam
        console.log('Exam submitted', {
          exam: this.exam,
          sections: this.sections,
          settings: this.examSettings
        });
      }
    },
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--;
      }
    },
    cancel() {
      this.$router.go(-1); 
    },
    addQuestion() {
      this.sections[0].questions.push({
        text: '新题目',
        options: [
          { text: '选项1', correct: false },
          { text: '选项2', correct: false }
        ],
        difficulty: '一般',
        points: 5
      });
    },
    removeQuestion(index) {
      this.sections[0].questions.splice(index, 1);
    },
    removeOption(qIndex, oIndex) {
      this.sections[0].questions[qIndex].options.splice(oIndex, 1);
    },
    setPoints(index) {
      const newPoints = prompt('请输入分数', this.sections[0].questions[index].points);
      if (newPoints && !isNaN(newPoints)) {
        this.sections[0].questions[index].points = parseInt(newPoints);
      }
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    fetchQuestions() {
    // 实际项目中这里应该是API调用
    // 模拟从题库获取5道题
    this.sections[0].questions = this.questionBank.slice(0,5);
  },
  send() {
    this.$message('试卷已发布')
  }
  }
};
</script>

<style scoped>
.exam-creator {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.step-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h2 {
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-input, .form-select, .form-textarea, .section-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.note {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.radio-group {
  display: flex;
  gap: 15px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover {
  background-color: #f0f0f0;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
}

.section-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.section-info {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
}

.question-section {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
  background-color: white;
}

.question-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.question-item:last-child {
  border-bottom: none;
}

.question-content {
  margin-bottom: 10px;
}

.question-text {
  font-weight: bold;
  margin-bottom: 10px;
}

.question-options {
  margin-left: 20px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.option-text {
  flex-grow: 1;
}

.option-correct {
  color: green;
  margin: 0 10px;
}

.option-delete {
  color: red;
  cursor: pointer;
}

.question-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

.question-actions {
  display: flex;
  gap: 10px;
}

.settings-container {
  background-color: white;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
}

.setting-item {
  margin-bottom: 15px;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
</style>